<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // AJAX: Asynchronous Javascript And XML  
        // 本质：通过JS发送异步请求得到XML数据 但是很久之前就已经不再使用XML格式的数据了 改为使用JSON格式。
        // XML：Extensible Markup Language 是一种文件格式 可以单独作为一个文件
        // JSON：JavaScript Object Notation 是一种文件格式 可以单独作为一个文件  但是一旦到了JS环境中来 就是一个对象 数组也算
        // XML和HTML都属于标记语言 HTML是超文本标记语言 XML是可拓展标记语言 通常用于后端 配置文件 数据文件等等

        // var obj = {
        //     "to": "Geroge",
        //     "from": "John",
        //     "heading": "Reminder",
        //     "body": "Don't forget the meeting!"
        // }


        // 发送ajax需要借助浏览器自带的功能 
        // ajax的兼容性最早可以到IE5
        // 但是ajax的使用方式是有兼容性问题的
        // 不过在IE8的时候就没有兼容性问题了

        // 1 初始化一个对象 
        var xhr = new XMLHttpRequest();

        console.log(xhr.readyState)
        // onabort:             中断事件
        // onerror:             出错事件
        // onload:              下载事件
        // onloadend:           下载完成事件
        // onloadstart:         下载开始事件
        // onprogress:          进度事件    
        // onreadystatechange:  等待状态改变事件
        // ontimeout:           超时事件
        // readyState:          等待状态属性
        // response:            响应
        // responseText:        响应文本
        // responseType:        响应类型
        // responseURL:         响应URL
        // responseXML:         响应XML
        // status:              HTTP请求状态码      200     302     304             404         500
        // statusText:          HTTP请求状态文本    OK      Found   Not Modified    Not Found   Internal Server Error
        // timeout:             超时时间


        // 如果我们将responseType设置为json 就表示我们希望返回的数据直接就是一个对象
        // 如果不设置json 就表示默认 就是一个字符串
        // xhr.responseType = "json"
        // 2 设置onreadystatechange 事件 或者 设置onload事件
        xhr.onreadystatechange = function () {
            // xhr.readyState 属性是xhr自己的属性 表示状态的变化
            // 0 刚刚初始化
            // 1 调用了open方法
            // 2 响应头已经回来了
            // 3 已经开始接收数据 但不一定接收完毕
            // 4 所有数据都已经接收完毕
            if (xhr.readyState === 4) {
                var obj = JSON.parse(xhr.responseText);
                alert(obj.message)
                // 请求成功了 但是目的不一定完成
                if(!obj.error) {
                    location.href = "http://www.baidu.com"
                }  
                
            }
        }

        // xhr.onload = function() {
        //     console.log(xhr.responseText)
        // }

        // 3 调用open方法 有三个参数 
        // 第一个决定请求的方式 GET POST PUT DELETE... 小写也行  
        // 第二个决定请求发给谁 一般是接口地址 
        // 第三个决定请求同步还是异步 true 表示异步 false 表示同步
        xhr.open("GET", "/lession01/demo", true)

        // 4 发送请求
        xhr.send()
    </script>
</body>

</html>